<template>
  <div class="breadcrumb_container" v-if="topBreadcrumbInfo.showTopBreadcrumb">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="info in route.matched" :to="{ path: info.path }" :key="info.path"
        v-show="info.meta.title">
        <span class="breadcrumb_text">{{ info.meta.title }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-icon :color="primaryColor" :size="20" class="close_icon" @click="hideTopBeadcrumb">
      <CircleClose />
    </el-icon>
  </div>
</template>
  
<script lang="ts" setup name="Breadcrumb">
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from "vue-router";
import { CircleClose } from "@element-plus/icons-vue";
import styles from "@/styles/variables.module.scss";
import { ref } from 'vue'
import { useTopBreadcrumbInfoStore } from "@/store/topBreadcrumbInfo";
const route = useRoute()
const primaryColor = ref(styles.primaryColor)
const topBreadcrumbInfo = useTopBreadcrumbInfoStore()
function hideTopBeadcrumb() {
  topBreadcrumbInfo.showTopBreadcrumb = false
}

</script>

<style scoped lang="scss">
.breadcrumb_container {
  height: $topBreadcrumbHeight;
  background-color: $asideBackgroundColor;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  .breadcrumb_text {
    font-size: 16px;
    color: $primaryColor;
  }

  .close_icon {
    &:hover {
      cursor: pointer;
    }
  }
}
</style>